<template>
  <div class="LoginChaxun">
    <div class="title">
      <div>登录情况查询</div>
      <div class="butexp">
        <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
      </div>
    </div>
    <div class="table">
      <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
      </TableColumn>
    </div>
     <!-- 底部分页 -->
    <div class="fenye">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="page.pageNo"
        :page-size="20"
        @current-change="getchaxunlist(timelist)"
        :total="+totalCount">
      </el-pagination>
    </div>               
  </div>
</template>

<script>
import {getqingkuangchaxunapi} from '@/api/system/LoginSituation'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
export default {
  name: 'CallPoliceLoginChaxun',
  components: {
    TopTile,
    TableColumn
  },
  props:{
    value1: {
      type:Array
    }
  },
  data() {
    return {
      issize:'medium',
      tableData: [],
      totalCount: '',
      page: {
        pageNo: 1,
        pageSize:20
      },
      timelist:[],
      tableConfig: [
        { label: '登录账号', prop: 'userNo' },
        {label:'登录用户',prop:'userName'},
        {label:'登录时间',prop:'loginTime',center: 'center' ,width:'160'},
        {label:'登出时间',prop:'logoffTime',center: 'center' ,width:'160'},
        {label:'登录会话ID',prop:'sessionId',showtooltip:true },
        {label:'登录令牌',prop:'tokenId',showtooltip:true },
        {label:'登录机器IP',prop:'clientIp' },
        {label:'登录地址',prop:'serverPath' ,showtooltip:true},
        {label:'登录服务器名称',prop:'serverName' },
        {label:'登出说明',prop:'logoffInfo' },
        {label:'登录来源', prop: 'loginSource' },
        {label:'登录类型',prop:'loginType' },
      ]
    };
  },

  mounted() {
    
  },

  methods: {
    // 获取表格数据
    async getchaxunlist(time) {
      this.timelist=time
      this.$refs.tabledata.loading=true
      const { data: { list ,totalCount} } = await getqingkuangchaxunapi({
        startTime:time[0],endTime:time[1],pageNo:this.page.pageNo-1,pageSize:this.page.pageSize
      })
      this.totalCount=totalCount
      this.tableData=list
      this.$refs.tabledata.loading=false
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('sst-microservice-biz/sst/user/logon/message/export',{
        startTime:this.value1[0],endTime:this.value1[1],pageNo:this.page.pageNo-1,pageSize:this.page.pageSize
      },'用户登录情况')
    },
    // 刷新列表
    shuaxin() {
      this.getchaxunlist(this.value1)
      this.$message.success('列表刷新成功')
    },
  },
};
</script>

<style scoped>
.LoginChaxun{
  height: 100%;
  .title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
      .butexp{
        display: flex;
        .moban{margin-right: 10px;}
      }
  }
  .table{
      height: 88%;
  }
  .fenye{
    text-align: right;
    margin-top: 10px;
  }
}
</style>